<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<div class="col-md-9" style="height: 1230px;width: 75%;">
    <div class="data_list" style="border-radius: 15px;height: 1230px;" >
        <div class="data_list_title" style="">
            <span class="glyphicon glyphicon-cloud-upload"></span>&nbsp;
            <c:if test="${empty blogInfo}">
                发布云记
            </c:if>
            <c:if test="${!empty blogInfo}">
                修改云记
            </c:if>

        </div>
        <div class="data_list" style="height: 1150px;border: none;" >
        <%--<div class="container-fluid" style="width: 75%">--%>
            <%--<div class="row" style="padding-top: 20px;width: 100%">--%>
                <c:if test="${empty typeList}">
                    <h2>暂未查询到云记类型！</h2>
                    <h4><a href="type?actionName=list">添加类型</a> </h4>
                </c:if>
                <c:if test="${!empty typeList}">
                    <form class="form-horizontal" method="post" action="blog"  >

                        <div class="col-md-8" style="width: 600px">
                            <%--
                                表单类型  enctype="multipart/form-data"
                                提交方式  method="post"
                            --%>

                                <input type="hidden" name="actionName" value="addOrUpdate">
                                <%--&lt;%&ndash; 设置隐藏域：用来存放noteId &ndash;%&gt;--%>
                                <input type="hidden" name="blogId" value="${blogInfo.id}">

                                <%--&lt;%&ndash; 设置隐藏域：用来存放用户发布云记时所在地区的经纬度 &ndash;%&gt;
                                &lt;%&ndash; 经度 &ndash;%&gt;--%>
                                <input type="hidden" name="lon" id="lon">
                                <%--&lt;%&ndash; 纬度 &ndash;%&gt;--%>
                                <input type="hidden" name="lat" id="lat">
                                <div class="form-group" style="width: 100%;text-align: left">

                                    <label for="typeId" class="col-sm-2 control-label" style="margin-left: 0;">类别:</label>
                                    <div class="col-sm-3">
                                        <%--<input class="form-control" name="nick" id="nickName" placeholder="昵称" value="${user.nick}">--%>
                                            <select id="typeId" class="form-control" style="" name="typeId">
                                                <option value="">请选择类别...</option>
                                                <c:forEach var="item" items="${typeList}">
                                                    <c:choose>
                                                        <c:when test="${!empty resultInfo}">
                                                            <option  <c:if test="${resultInfo.result.id == item.id}">selected="selected"</c:if> value="${item.id}">${item.name}</option>
                                                        </c:when>
                                                        <c:otherwise>
                                                            <option  <c:if test="${blogInfo.typeID == item.id}">selected</c:if> value="${item.id}">${item.name}</option>
                                                        </c:otherwise>
                                                    </c:choose>

                                                </c:forEach>
                                            </select>
                                    </div>

                                    <label for="title" class="col-sm-2 control-label" style="margin-left: 0">标题:</label>
                                    <div class="col-sm-5" style="float:left;">
                                        <c:choose>
                                            <c:when test="${!empty resultInfo}">
                                                <input class="form-control" style="text-align: center" name="title" id="title" placeholder="云记标题" value="${resultInfo.result.title}">
                                            </c:when>
                                            <c:otherwise>
                                                <input class="form-control" style="width: 200px" name="title" id="title" placeholder="云记标题" value="${blogInfo.title}">

                                            </c:otherwise>
                                        </c:choose>
                                    </div>

                                </div>
                        </div>
                        <div class="col-md-4" style="width: 200px;margin-left: 0">
                            <c:if test="${blogInfo.isOpen == 1}">
                                <input name="open" type="checkbox" value="1" id="ch" checked="checked" class="inputcheckbox" style="margin-left: 10px"/>公开
                            </c:if>
                            <c:if test="${blogInfo.isOpen != 1}">
                                <input name="open" type="checkbox" value="1" id="ch" class="inputcheckbox" style="margin-left: 10px"/>公开
                            </c:if>

                            <input type="submit" class="btn btn-primary" style="outline: none;box-shadow:none;margin-left: 10px" onclick="return checkForm()"  value="保存"/>
                            &nbsp;<span id="msg" style="font-size: 10px;color: red;white-space: nowrap;">${resultInfo.msg}</span>
                        </div>

                        <div class="form-group" >
                            <div class="col-sm-8" style="width: 100%;">
                                    <%--<label for="title" class="col-sm-2 control-label">内容:</label>--%>
                                <%--<script>
                                alert(${resultInfo});
                            </script>--%>
                                <c:choose>
                                    <c:when test="${!empty resultInfo}">
                                        <%--准备容器，加载富文本编辑器--%>
                                        <script class="form-control" style="height: 900px;width: 100%;resize: none;padding: 0" name="content">${blogInfo.content}</script>
                                    </c:when>
                                    <c:otherwise>
                                        <%--准备容器，加载富文本编辑器
                                        style="height: 360px;resize: none"--%>

                                        <textarea class="form-control" style="margin-left: 0;height: 900px;width: 100%;resize: none;padding: 0;border: none;outline: none" id="content" name="content">${blogInfo.content}</textarea>
                                    </c:otherwise>
                                </c:choose>
                            </div>

                        </div>
                    </form>
                </c:if>
            <%--</div>--%>
        </div>

    </div>
</div>
    <!-- 配置文件 -->
    <script type="text/javascript" src="statics/ueditor/ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="statics/ueditor/ueditor.all.js"></script>


    <script type="text/javascript">

        window.onload = function () {
            //alert("请勿发布违法内容，如果系统检测到博客内（标题，类型，内容）含有违禁词汇，博客将被禁止公开！！！");

            swal({
                title: "系统提醒",  // 标题
                text: "<h3>请勿发布违法内容，如果系统检测到博客内（标题，类型，内容）含有违禁词汇，博客将被禁止公开！！！</h3>", // 内容
                type: "warning", // 图标  error	 success	info  warning
                showCancelButton: false,  // 是否显示取消按钮
                confirmButtonColor: "red", // 确认按钮的颜色
                confirmButtonText: "确定", // 确认按钮的文本
                allowOutsideClick: false, //不允许点击其他地方（点击其他地方不关闭）
            })

        }


        var ue;
        ue = UE.getEditor('content');
        $(function (){
            ue.autoheight = true;
            ue.initialFrameWidth = document.getElementById("content").style.width;
        });

        ue.onclick = function () {
            window.scrollTo({
                /*top: 200,
                left:200,
                behavior: "smooth"*/
            });

            document.getElementById("content").hidden = true;
        }

        document.getElementById("content").onclick = function () {
            document.getElementById("content").style.borderWidth = 1;
        }


        /**
         * 表单校验
             1. 获取表单元素的值
                 获取下拉框选中的选项  .val()
                 获取文本框的值       .val()
                 获取富文本编辑器的内容
                     ue.getContent() 获取富文本编辑器的内容（包含html标签）
                     ue.getContentTxt() 获取富文本编辑器的纯文本内容（不包含html标签）
             2. 参数的非空判断
                如果为空，提示用户，并return fasle
             3. 如果参数不为空，则return true，提交表单
         * @returns {boolean}
         */
        function checkForm() {
            /*  1. 获取表单元素的值 */
            // 获取下拉框选中的选项  .val()
            var typeId = $("#typeId").val();
            // 获取文本框的值       .val()
            var title = $("#title").val();
            //  获取富文本编辑器的内容 ue.getContent()
            var content = ue.getContent();

            /* 2. 参数的非空判断 */
            if (isEmpty(typeId)) {
              $("#msg").html("请选择云记类型！");
              return false;
            }
            if (isEmpty(title)) {
                $("#msg").html("云记标题不能为空！");
                return false;
            }
            if (isEmpty(content)) {
                $("#msg").html("云记内容不能为空！");
                return false;
            }

            if (title.length > 30){
                $("#msg").html("云记标题不能超过30位！");
                return false;
            }

            return true;
        }
    </script>

    <%-- 引用百度地图API文件，需要申请百度地图对应ak密钥--%>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=yrxymYTyuefnxNtXbZcMU8phABXtu6TG"></script>
    <script type="text/javascript">
        /* 百度地图回去当前地址位置的经纬度 */
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function (r){
            // 判断是否获取到
            if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                console.log("您的位置：" + r.point.lng + "，" + r.point.lat);
                // 将获取到的坐标设置给隐藏域
                $("#lon").val(r.point.lng);
                $("#lat").val(r.point.lat);
            } else {
                console.log("failed:" + thi.getStatus());
            }
        });
    </script>